<!DOCTYPE html>
<html>
    <head>
        <title>上下级页面流向图</title>
        <meta charset="utf-8">
        <style type="text/css">
		 #container1 {position:absolute;width:33%;height:15%;z-index:1;left:0px;}
		 #container2 {position:absolute;width:33%;height:15%;z-index:2;left:33%;}
		 #container6 {position:absolute;width:33%;height:15%;z-index:3;left:66%;}
		  #container3 {position:absolute;width:33%;height:15%;z-index:1;left:0px;}
		 #container4 {position:absolute;width:33%;height:15%;z-index:2;left:33%;}
		  #container5 {position:absolute;width:33%;height:15%;z-index:3;left:66%;}
		 </style>
        <link rel="stylesheet" href="${rc.contextPath}/stylesheets/main.css">
        <link rel="shortcut icon" type="image/png" href="${rc.contextPath}/images/favicon.png">
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-datepicker3.min.css">
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/jquery-ui.min.css">
		<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    </head>
	<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
						<div class="col-xs-2">
							<div class="dataTables_length">
								<label>日期
									<input type="text" id="dateTime" name="dateTime" class="form-control">
								</label>
							</div>
						</div>
						<div class="col-xs-2">
							<div class="dataTables_length">
								<button type="button" class="btn btn-pink btn-sm" id="generateBtn">
									<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
									查询
								</button>
								&nbsp;&nbsp; <span style="color: red;" id="message" hidden="true"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<hr>
			<div class="row" id="container">
				<div style="min-width: 100%; height: 400px;margin:0 auto;">
					 <div id="container1" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
					 <div id="container2" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
					 <div id="container6" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
				</div>
				<br>
				<br>
				<div style="min-width: 100%; height: 400px;margin:0 auto;">
					 <div id="container3" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
					 <div id="container4" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
					 <div id="container5" style="width: 33%; height: 400px; margin: 0 auto; reflow:true"></div>
				</div>
			</div>
		</div>
		<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${rc.contextPath}/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>

		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap-datepicker.min.js"></script>
    	<script type="text/javascript" src="${rc.contextPath}/javascripts/highcharts.js"></script>
		<script type="text/javascript">
			$(document).ready(function(event) {
				$('.form-inline #dateTime').datepicker({format: "yyyy-mm-dd", autoclose: true});
			  });
			  
			var timeArray=new Array();
			var mydata0=new Array();
			var mydata1=new Array();
			var mydata2=new Array();
			var mydata3=new Array();
			var mydata4=new Array();
			var mydata5=new Array();
			
			var data0,data1,data2,data3,data4,data5;
			$("#generateBtn").click(function(){
				var dateTime = $("#dateTime").val();
				if(dateTime==null || dateTime.length==0){
					return;
				}
				 $.ajax({
					   type: "GET",
					   async:false,
					   data: "dateTime="+dateTime,
					   url: "${rc.contextPath}/manGod/ajaxHistoryData",
					   success: function(data){ 
						   if(data==null || data.length==0){
								$("#container1").hide();
								$("#container2").hide();
								$("#container3").hide();
								$("#container4").hide();
								$("#container5").hide();
								$("#container6").hide();
								window.location.href="${rc.contextPath}/page/404";
								   return;
							   }
							   else{
								$("#container1").show();
								$("#container2").show();
								$("#container3").show();
								$("#container4").show();
								$("#container5").show();
								$("#container6").show();
							   }
						   
						   timeArray=[];
						   	 mydata0=[];
			 		    	 mydata1=[];
			 		    	 mydata2=[];
			 		    	 mydata3=[];
			 		    	 mydata4=[];
			 		    	 mydata5=[];
			 				    data0=data[0];
			 				 	data1=data[1];
			 				 	data2=data[2];
			 				 	data3=data[3];
			 				 	data4=data[4];
			 					data5=data[5];
			 					data6=data[6];
			 					data7=data[7];
			 				   for(t=0;t<data5[0];t++){
			 				mydata0.push(data0[t]);
			 				mydata1.push(data1[t]);
			 				mydata2.push(data2[t]);
			 				mydata3.push(data3[t]);
			 				mydata4.push(data4[t]);
			 				timeArray.push(data6[t]);
			 				mydata5.push(data7[t]);
			 				   }
			 				   
			 				  $('#container1').highcharts({                   //图表展示容器，与div的id保持一致
			 		      	        chart: {
			 		      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
			 		      	        },
			 		      	        title: {
			 		      	            text: '获取验证码按钮'      //指定图表标题
			 		      	        },
			 		      	        xAxis: {
			 		                     categories:timeArray
			 		      	              //指定x轴分组
			 		      	        },
			 		      	        yAxis: {
			 		      	            title: {
			 		      	                text: ''                  //指定y轴的标题
			 		      	            }
			 		      	        },
			 		      	      credits:{
			 		              	enabled:false,
			 		            
			 		              },
			 		              legend:{
			 		              	enabled:false
			 		              },
			 		      	        series: [{                                 //指定数据列
			 		      	            name: '次数',                          //数据列名
			 		      	          marker: {
			 		      	        		enabled:true,
			 		                      symbol: 'diamond'
			 		                  },
			 		      	            data: mydata0                       //数据
			 		      	        }]
			 		      	    });
			 		      		
			 		    		$('#container2').highcharts({                   //图表展示容器，与div的id保持一致
			 		      	        chart: {
			 		      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
			 		      	        },
			 		      	        title: {
			 		      	            text: '立即领取按钮'      //指定图表标题
			 		      	        },
			 		      	        xAxis: {
			 		                     categories:timeArray
			 		      	              //指定x轴分组
			 		      	        },
			 		      	        yAxis: {
			 		      	            title: {
			 		      	                text: ''                  //指定y轴的标题
			 		      	            }
			 		      	        },
			 		      	      credits:{
			 		                	enabled:false,
			 		              
			 		                },
			 		                legend:{
			 		                  	enabled:false
			 		                  },
			 		      	        series: [{                                 //指定数据列
			 		      	            name: '次数',                          //数据列名
			 		      	          marker: {
			 		      	        	enabled:true,
			 		                      symbol: 'diamond'
			 		                  },
			 		      	            data: mydata1                       //数据
			 		      	        }]
			 		      	    });
			 		    		
			 		    		$('#container3').highcharts({                   //图表展示容器，与div的id保持一致
			 		      	        chart: {
			 		      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
			 		      	        },
			 		      	        title: {
			 		      	            text: '红包活动页面'      //指定图表标题
			 		      	        },
			 		      	        xAxis: {
			 		                     categories:timeArray
			 		      	              //指定x轴分组
			 		      	        },
			 		      	        yAxis: {
			 		      	            title: {
			 		      	                text: ''                  //指定y轴的标题
			 		      	            }
			 		      	        },
			 		      	      credits:{
			 		                	enabled:false,
			 		              
			 		                },
			 		                legend:{
			 		                  	enabled:false
			 		                  },
			 		      	        series: [{                                 //指定数据列
			 		      	            name: '次数',                          //数据列名
			 		      	          marker: {
			 		      	        	enabled:true,
			 		                      symbol: 'diamond'
			 		                  },
			 		      	            data: mydata2                      //数据
			 		      	        }]
			 		      	    });
			 		    		
			 		    		$('#container4').highcharts({                   //图表展示容器，与div的id保持一致
			 		      	        chart: {
			 		      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
			 		      	        },
			 		      	        title: {
			 		      	            text: '弹幕页面'      //指定图表标题
			 		      	        },
			 		      	        xAxis: {
			 		                     categories:timeArray
			 		      	              //指定x轴分组
			 		      	        },
			 		      	        yAxis: {
			 		      	            title: {
			 		      	                text: ''                  //指定y轴的标题
			 		      	            }
			 		      	        },
			 		      	      credits:{
			 		                	enabled:false,
			 		              
			 		                },
			 		                legend:{
			 		                  	enabled:false
			 		                  },
			 		      	        series: [{                                 //指定数据列
			 		      	            name: '次数',                          //数据列名
			 		      	          marker: {
			 		      	        	enabled:true,
			 		                      symbol: 'diamond'
			 		                  },
			 		      	            data: mydata3                       //数据
			 		      	        }]
			 		      	    });
			 		    		
			 		    		$('#container5').highcharts({                   //图表展示容器，与div的id保持一致
			 		      	        chart: {
			 		      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
			 		      	        },
			 		      	        title: {
			 		      	            text: '我的红包页面'      //指定图表标题
			 		      	        },
			 		      	        xAxis: {
			 		                     categories:timeArray
			 		      	              //指定x轴分组
			 		      	        },
			 		      	        yAxis: {
			 		      	            title: {
			 		      	                text: ''                  //指定y轴的标题
			 		      	            }
			 		      	        },
			 		      	      credits:{
			 		                	enabled:false,
			 		              
			 		                },
			 		                legend:{
			 		                  	enabled:false
			 		                  },
			 		      	        series: [{                                 //指定数据列
			 		      	            name: '次数',
			 		      	          marker: {
			 		      	        	enabled:true,
			 		                      symbol: 'diamond'
			 		                  },//数据列名
			 		      	            data: mydata4                       //数据
			 		      	        }]
			 		      	    });
			
			 		    		$('#container6').highcharts({                   //图表展示容器，与div的id保持一致
			 		      	        chart: {
			 		      	            type: 'spline'                         //指定图表的类型，默认是折线图（line）
			 		      	        },
			 		      	        title: {
			 		      	            text: '吐槽'      //指定图表标题
			 		      	        },
			 		      	        xAxis: {
			 		                     categories:timeArray
			 		      	              //指定x轴分组
			 		      	        },
			 		      	        yAxis: {
			 		      	            title: {
			 		      	                text: ''                  //指定y轴的标题
			 		      	            }
			 		      	        },
			 		      	      credits:{
			 		                	enabled:false,
			 		              
			 		                },
			 		                legend:{
			 		                  	enabled:false
			 		                  },
			 		      	        series: [{                                 //指定数据列
			 		      	            name: '次数',                          //数据列名
			 		      	          marker: {
			 		      	        	enabled:true,
			 		                      symbol: 'diamond'
			 		                  },
			 		      	            data: mydata5                       //数据
			 		      	        }]
			 		      	    });
								 
					   }
					});
				 
					
			});
		</script>
    </body>
</html>